<script>
import axios from "axios";

export default {
  data() {
    return {
      pageDto: {
        pageSize: 9,
        pageNum: 1,
        data: {
          userName: "",
          createdAt1: "",
          createdAt2: ""
        }
      },
      SystemOperationLogList: [],
      total: 0,
      pages: 0,
    }
  },
  methods: {
    getData: function () {
      if (this.pageDto.data.createdAt1 != null && this.pageDto.data.createdAt1 !== ""){
        this.pageDto.data.createdAt1 = this.dateFormat(this.pageDto.data.createdAt1 )
      }
      if (this.pageDto.data.createdAt2 != null && this.pageDto.data.createdAt2 !== ""){
        this.pageDto.data.createdAt2 = this.dateFormat(this.pageDto.data.createdAt2 )
      }
      console.log(this.pageDto)
      //以json格式传参
      axios.post("/oa/operationLog/getSystemOperationLogList", this.pageDto).then((res) => {
        console.log(res.data.data)
        this.pageDto.pageNum = res.data.data.pageNum;
        this.pageDto.pageSize = res.data.data.pageSize;
        this.total = res.data.data.total;
        this.pages = res.data.data.pages;
        this.SystemOperationLogList = res.data.data.list;
      })
    }
    , dateFormat(time) {  //日期转换
      var date = new Date(time);
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
      * 使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05
      * */
      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
// 拼接
      return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
//       return year + "-" + month + "-" + day;
    },
  },
  created() {
    this.getData();
  }
}
</script>

<template>
  <div class="titleBox">操作日志</div>
  <br>
  <div>
    <!-- 首页表格信息显示 -->
    <div class="mt-4">
      用户名:
      <el-input
          v-model="this.pageDto.data.userName"
          style="max-width: 150px"
          placeholder="请输入文件名"
      >
      </el-input>
      &nbsp;&nbsp;
      时间段:
      <el-date-picker
          v-model="pageDto.data.createdAt1"
          style="max-width: 230px"
          type="datetime"
          placeholder="开始时间"
      />&nbsp;to
      <el-date-picker
          v-model="pageDto.data.createdAt2"
          style="max-width: 230px"
          type="datetime"
          placeholder="结束时间"
      />&nbsp;&nbsp;
      <el-button @click="getData()">
        查找
      </el-button>
    </div>
    <el-table :data="this.SystemOperationLogList" style="width: 100%">

      <el-table-column label="编号">
        <template #default="scope">
          <div style="display: flex; align-items: center">

            <span style="margin-left: 10px">{{ scope.row.logId }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="用户名">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.userName }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="角色">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.roleName }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="事件" prop="companyInfo">
        <template #default="scope" >
          <el-tooltip style="display: flex; align-items: center" placement="top-start" :content="scope.row.action">
            <span v-if="scope.row.action">{{scope.row.action.substring(0,12) }}...</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作时间">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ dateFormat(scope.row.createdAt) }}</span>
          </div>
        </template>
      </el-table-column>

    </el-table>


    <!-- 分页-->
    <el-pagination
        v-model:current-page="this.pageDto.pageNum"
        :page-size="this.pageDto.pageSize"
        :pager-count="10"
        layout="prev, pager, next"
        :total="this.total"
        @current-change="getData"
    />
  </div>
</template>

<style scoped lang="less">

</style>
